<template>
  <div class="test">
    <line-head-form class="head" :title="'活动名称：'+activeName" type="add" />
    <el-form :inline="true" :model="form" class="t-form gray">
      <el-form-item label="">
        <el-select v-model="form.dataSubject" placeholder="科目">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="(subject,index) in condition.subjectList" :label="subject.name" :value="subject.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="form.baseLevelId" placeholder="班型">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in condition.levelObj.list" :label="item.name" :value="item.id" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="form.rangeType" placeholder="类型">
          <el-option label="全部" value=""></el-option>
          <el-option label="标准" value="0"></el-option>
          <el-option label="自定义" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select v-model="form.baseSectionId" placeholder="年级">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="(grade,index) in condition.gradeObj.list" :label="grade.name" :value="grade.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select v-model="form.baseTrimesterId" placeholder="学期">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="(term,index) in condition.termObj.list" :label="term.name" :value="term.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-input v-model="form.name" placeholder="请输入试卷模版名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search" class="search-btn">查询</el-button>
      </el-form-item>
      <el-form-item class="new-item">
        <el-button v-if="config.model_add" type="primary" class="new-btn" @click="addTestPaper">新建试卷模版</el-button>
      </el-form-item>
    </el-form>
    <el-table class="line-table" empty-text="暂无试卷，请先添加试卷" :data="result.list" header-align="center">
      <el-table-column prop="name" label="试卷名称" align="center"></el-table-column>
      <el-table-column prop="subjectName" label="科目" align="center"> </el-table-column>
      <el-table-column prop="baseSection" label="年级" align="center"> </el-table-column>
      <el-table-column label="类型" align="center">
        <template scope="scope">
          {{scope.row.rangeType===0?'标准':'自定义'}}
        </template>
      </el-table-column>
      <el-table-column prop="dataTimeTypeName" label="试卷类型" align="center"> </el-table-column>
      <el-table-column prop="baseTrimester" label="学期" align="center"> </el-table-column>
      <el-table-column prop="baseLevel" label="班型" align="center"> </el-table-column>
      <el-table-column prop="examModelWordName" label="引用模版" align="center"> </el-table-column>
      <el-table-column prop="createUser" label="创建人" align="center" width="100px"> </el-table-column>
      <el-table-column label="最后编辑时间" align="center" width="180px">
        <template scope="scope">
          {{scope.row.updateTime | formatDate('YYYY-MM-DD H:mm:ss')}}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" class-name="t-btn" width="320px">
        <template scope="scope">
          <span class="btn-edit" v-if="scope.row.rangeType===1&&config.model_range" @click="setUse(scope.row)">
            使用范围
          </span>
          <span class="btn-edit" v-if="!(scope.row.relatedReportSum>0)&&config.model_update&&(scope.row.createUserId===userInfo.userId||userInfo.isManager)" @click="editExam(scope.row)">
            编辑
          </span>
          <span class="btn-edit" v-else @click="editExam(scope.row,'isView')">
            查看
          </span>
          <span class="btn-edit" v-if="!(scope.row.relatedReportSum>0)&&config.model_block_update&&(scope.row.createUserId===userInfo.userId||userInfo.isManager)" @click="addModule(scope.row)">
            修改模块
          </span>
          <span class="btn-edit" v-else @click="addModule(scope.row,'isView')">
            查看模块
          </span>
          <span v-if="config.model_del" class="btn-edit" @click="deleteExam(scope.row)">
            删除
          </span>
          <span class="btn-edit" v-if="config.model_word_rel_set" @click="dialogTableVisible=true;getModuleList();actId=scope.row.id;checkItem=scope.row.examModelWordId">
            模版引用
          </span>
        </template>
      </el-table-column>
    </el-table>
    <v-pagination ref="pagin" class="pag" :total="result.total|toNumber" @getListResult="getExamList" :currentPage="form.pageIndex"></v-pagination>
    <el-dialog title="引用模板" :visible.sync="dialogTableVisible">
      <div class="has-module">
        <el-form :inline="true" class="t-form">
          <el-form-item label="">
            <el-input v-model="sForm.name" placeholder="请输入文案模板名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="mSearch" class="search-btn">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="search-table">
          <el-table @row-click="rowClick" class="line-table word-table" :data="mResult.list" header-align="center" empty-text="暂无试卷模版">
            <el-table-column label="" align="center" width="30">
              <template scope="scope">
                <el-radio :label="scope.row.id" v-model="checkItem" class="table-radio"></el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="文案模板名称" align="center">
              <template scope="scope">
                <el-popover width="400" trigger="hover" :content="scope.row.content">
                  <span slot="reference">{{scope.row.name}}</span>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <v-pagination ref="sFagin" class="pag" :total="mResult.total|toNumber" :pageSize="sForm.pageSize" @getListResult="getModuleList" :currentPage="sForm.pageIndex"></v-pagination>
          <div class="opt-btn">
            <el-button class="height-btn" @click="setExamModelWordRel">确定</el-button>
            <el-button class="light-btn" @click="checkItem='';setExamModelWordRel()">重置</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import VPagination from '../common/Pagination'
import LineHeadForm from '../common/LineHeadForm'
import { mapState, mapActions, mapGetters } from 'vuex'
import io from 'lib/io'
import storage from 'lib/storage'
export default {
  components: {
    VPagination,
    LineHeadForm
  },
  data() {
    return {
      activeName: this.$route.query.activeName,
      form: {
        examModelActivityId: this.$route.query.activeId,
        name: '',
        baseTrimesterId: null,
        dataSubject: null,
        baseSectionId: null,
        baseLevelId: null,
        rangeType: null,
        pageIndex: 1,
        pageSize: 10
      },
      sForm: {
        name: '',
        pageIndex: 1,
        pageSize: 10,
        isUse: 1
      },
      checkItem: '',
      actId: '',
      mResult: {},
      userInfo: storage.getCurrentUserInfo(),
      dialogTableVisible: false
    }
  },
  computed: {
    ...mapState(['condition', 'exam']),
    ...mapState({ result: state => state.exam.exam }),
    ...mapGetters(['config'])
  },
  watch: {
    'form.dataSubject'(val) {
      this.findBaseSectionPage({ pageIndex: 1, pageSize: 1000000, subjectId: this.form.dataSubject })
    }
  },
  created() {
    this.getExamList()
    this.findBaseSectionPage({ pageIndex: 1, pageSize: 1000000, subjectId: this.form.dataSubject })
    this.findBaseTermPage({ pageIndex: 1, pageSize: 1000000 })
    this.findBaseLevelPage({ pageIndex: 1, pageSize: 10000000 })
    this.findSubjectsData({ sectionId: this.baseSectionId })

  },
  methods: {
    ...mapActions(['findBaseSectionPage', 'findSubjectsData', 'findBaseTermPage', 'examModelList', 'findBaseLevelPage']),
    rowClick(row,column,event){
      this.checkItem=row.id
    },
    mSearch() {
      this.$refs.sFagin.changePage(1)
      this.sForm.pageIndex = 1
      this.getModuleList()
    },
    async getModuleList(opt) {
      let { data } = await io.post6(io.wordList, { ...this.sForm, ...opt })
      if (data.success) {
        data.data.list.map((item, i) => {
          let content = ''
          item.list.map((mItem, mI) => {
            content += mItem.minInterval + '-' + mItem.maxInterval + ';文案：' + mItem.passDescribe + ';备注：' + mItem.passRemark + ';'
          })
          item.content = content
        })
        this.mResult = data.data
      }
    },
    async setExamModelWordRel() {
      let { data } = await io.post6(io.setExamModelWordRel, { examModelId: this.actId, examModelWordId: this.checkItem })
      if (data.success) {
        this.$message('设置成功')
        this.getExamList()
        this.dialogTableVisible = false
      }
    },
    changeLecture(scope) {
      if (scope.row.status === 0) {
        this.$router.push({ path: '/main/teach-research/course/' + scope.row.id })
      } else {
        this.$message('已发布的课程，不可以编辑！')
      }
    },
    setUse(row) {
      this.$router.push({ path: '/main/exam/set-use', query: { id: row.id, baseSectionId: row.baseSectionId, dataSubject: row.dataSubject, baseTrimesterId: row.baseTrimesterId, activeId: this.form.examModelActivityId, activeName: this.activeName } })
    },
    deleteExam(row) {
      this.$confirm('是否确定删除该试卷模板？删除将会连同学生成绩数据一并删除', '提示').then(async () => {
        let { data } = await io.post6(io.deleteExamModel, { id: row.id })
        if (data.success) {
          this.$message({ message: '删除成功', type: 'success' })
          this.getExamList()
        }
      }).catch((err) => {
        console.log('取消')
      })
    },
    addModule(row, isView) {
      this.$router.push({ path: '/main/exam/add-module', query: { id: row.id, rangeType: row.rangeType, activeId: this.form.examModelActivityId, activeName: this.activeName, isView: isView } })
    },
    editExam(row, isView) {
      this.$router.push({ path: '/main/exam/test-paper/' + row.id, query: { activeId: this.form.examModelActivityId, activeName: this.activeName, isView } })
    },
    editLecture(scope) {
      // if(scope.row.status===0){
      this.$router.push({ path: '/main/teach-research/course/edit-lecture/' + scope.row.id })
      // }else{
      //   this.$message('已发布的课程，不可以编辑讲次！')
      // }
    },
    search() {
      this.$refs.pagin.changePage(1)
      this.form.pageIndex = 1
      this.getExamList()
    },
    addTestPaper() {
      this.$router.push({ path: '/main/exam/test-paper/add', query: { activeId: this.form.examModelActivityId, activeName: this.activeName } })
    },
    getExamList(opt) {
      this.examModelList({ ...this.form, ...opt, type: this.userInfo.isSystem ? 0 : 1 })
    },
    async publishLesson(id, status) {
      if (status === 1) {
        return
      }
      let tipText = '是否发布？发布后不能新增、移动、修改讲次'
      this.$confirm(tipText).then(async () => {
        let { data } = await io.post6(io.publishLesson, { id, status })
        if (data.success) {
          this.$message({ message: '修改成功', type: 'success' })
          this.getExamList()
        }
      }).catch((err) => {
        console.log('取消', err)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~assets/stylus/mixin.styl'
.test
  padding-bottom 50px
  .head
    margin-top 20px
.t-form
  table-form()
  margin-top 20px
  margin-bottom 30px
  padding-right 140px

.btn-edit
  cursor  pointer
  color  #0084bb
  width  56px;
  display  inline-block
  padding  9px 0
  border-color #0084bb
.line-table
  .icon
    cursor pointer
    font-size 20px
    color #999
    &:hover
      color #01d1bb
.published
    .icon
      color transparent
      cursor auto
      &:hover
        color transparent
        cursor auto
.opt-btn
  text-align center
  margin-top 30px
</style>
<style lang="stylus">
.word-table tbody
  cursor pointer
</style>




      